<script setup lang="ts">
import { getGoodsDataDetail } from "@/api/orderManag/purchaseOrder";
import { dealDataAdd } from "@/utils/common";
import { cloneDeep } from "@pureadmin/utils";
import dayjs from "dayjs";
import { onMounted, ref, watch } from "vue";
import { useColumns } from "../utils/columns";
const { fhGoodsColumns } = useColumns();

const props = defineProps({
  subOrderId: {
    type: Number,
    default: 0
  },
  isPrint: {
    type: Boolean,
    default: false
  },
  distrCountList: {
    type: Array<any>,
    default: () => []
  }
});
const goodsForm = ref<any>({});
const goodsList = ref([]);
const oriGoodsList = ref([]);
const simpleGoodsColumns = cloneDeep(fhGoodsColumns).slice(1, 6);
// goodsType 商品类型 1 抓机商品 2 兑换礼品
simpleGoodsColumns.splice(3, 0, {
  label: "关联供应商",
  prop: "supplierName",
  minWidth: 100,
  formatter: row => row.supplierName || "--"
});
if (props.isPrint) {
  simpleGoodsColumns[4].cellRenderer = ({ row }) =>
    row.goodsType == 1 ? "抓机商品" : row.goodsType == 2 ? "兑换礼品" : "其他";
}

onMounted(async () => {
  let params = {
    suborderId: props.subOrderId
  };
  getGoodsDataDetail(params).then(res => {
    let data = res.data || {};
    oriGoodsList.value = data.responses || [];
    goodsForm.value = data || {};
    dealGoodsListCount();
  });
});

watch(
  () => props.distrCountList,
  newVal => {
    if (oriGoodsList.value.length > 0) {
      dealGoodsListCount();
    }
  }
);

const dealGoodsListCount = () => {
  let tempList = cloneDeep(oriGoodsList.value);
  let sumCounts = 0;
  tempList.forEach(v => {
    let findObj = props.distrCountList.find(j => j.goodsId == v.goodsId);
    if (findObj && findObj.goodsId) {
      v.goodsAmount = findObj.distributionCount;
    }
    sumCounts = dealDataAdd(v.goodsAmount, sumCounts);
  });
  goodsForm.value.sumCounts = sumCounts;
  goodsList.value = tempList;
};
</script>

<template>
  <div class="goods-box">
    <!-- 门店仓信息 -->
    <div class="store-info">
      <div class="flex-1">
        <h3 class="text-black mb-1">订单信息</h3>
        <el-form label-position="right" label-width="100px" :model="goodsForm">
          <el-form-item label="采购订单编码" prop="depositoryId" class="flex-1">
            <div>{{ goodsForm.storeOrderCode || "--" }}</div>
          </el-form-item>
          <el-form-item label="下单时间" prop="depositoryId" class="flex-1">
            <div>
              {{ dayjs(goodsForm.gmtCreate).format("YYYY-MM-DD HH:mm") }}
            </div>
          </el-form-item>
          <el-form-item label="采购数量" prop="depositoryId" class="flex-1">
            <div>{{ goodsForm.sumCounts || 0 }}</div>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex-1">
        <h3 class="text-black mb-1">发货信息</h3>
        <el-form label-position="right" label-width="80px" :model="goodsForm">
          <el-form-item label="仓库名称" prop="depositoryId" class="flex-1">
            <div>{{ goodsForm.depositoryName || "--" }}</div>
          </el-form-item>
          <el-form-item label="联系人" prop="depositoryId" class="flex-1">
            <div>{{ goodsForm.contacts || "--" }}</div>
          </el-form-item>
          <el-form-item label="联系方式" prop="depositoryId" class="flex-1">
            <div>{{ goodsForm.contact || "--" }}</div>
          </el-form-item>
          <el-form-item label="地址" prop="depositoryId" class="flex-1">
            <div>{{ goodsForm.address || "--" }}</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <pure-table
      row-key="id"
      align-whole="center"
      :header-cell-style="{
        background: 'var(--el-fill-color-light)',
        color: 'var(--el-text-color-primary)'
      }"
      max-height="500"
      :data="goodsList"
      :columns="simpleGoodsColumns"
    />
  </div>
</template>
<style lang="scss" scoped>
.goods-box {
  margin-bottom: 25px;
  -webkit-print-color-adjust: exact;
  -moz-print-color-adjust: exact;
  // color-adjust: exact;
  page-break-after: always;
}
.goods-box .el-form-item {
  margin-bottom: 0px;
}
.store-info {
  padding: 15px 15px 5px;
  border-radius: 8px;
  background-color: #efefef;
  margin-bottom: 15px;
  display: flex;
}
</style>
